<!--
shallowReadonly()
  作用:创建一个“浅层只读”的对象，仅限制对象第一层属性不可修改，深层嵌套属性仍然是可变的。
  特点:
    1、第一层属性无法修改（会抛出警告或错误）。
    2、深层嵌套的属性可以修改，但它们本身不是响应式的。

shallowReactive():
  作用:创建一个“浅层响应式”的对象，仅对对象的第一层属性是响应式的，深层嵌套属性不具备响应性。
  特点:
    1、第一层属性可以被追踪并触发视图更新。
    2、深层嵌套的属性不会被代理为响应式。

工具函数	             适用场景
shallowReactive	      对大数据对象或性能敏感场景，仅需要第一层属性响应式，深层属性无需跟踪时使用。
shallowReadonly	      限制第一层属性只读，深层属性允许修改，但无需深层次响应式时使用，常用于保护外部数据。
isProxy	              用于判断数据是否为 Vue 代理，调试或某些动态处理场景中验证数据是否被 Vue 管理。
-->
<template>
  <div id="wrap">
    <h1>shallowReactive()&shallowReadonly()</h1>
    <p class="group">
      <button type="button" @click="editshllowReactive">修改shallowReactive</button>
    </p>
    <hr />

    <p class="group">{{ shallowReactivedataObj3.count }}</p>
    <hr />

    <ul class="group">
      <li v-for="item in shallowReactivedataObj3.strArr" :key="item">{{ item }}</li>
    </ul>
    <hr />

    <ul class="group">
      <li v-for="(item, name) in shallowReactivedataObj3.user" :key="name">{{ item }}</li>
    </ul>
    <hr />
  </div>
</template>

<script lang="ts">
export default {
  name: 'dayStuDemo22',
};
</script>

<script lang="ts" setup>
import { shallowReactive, shallowReadonly } from 'vue';
const dataObj3 = {
  count: 0,
  strArr: ['php', '刘强东', '马云', '马化腾', '任正非'],
  user: {
    name: '刘强东',
    sex: 'nan',
    age: 42,
    aihao: {},
  },
};
const shallowReactivedataObj3 = shallowReactive(dataObj3);
const shallowReadonlydataObj3 = shallowReadonly(dataObj3);
console.log(shallowReadonlydataObj3, shallowReactivedataObj3);

const editshllowReactive = () => {
  //修改第一层
  // shallowReactivedataObj3.count++
  // shallowReactivedataObj3.strArr = ['234','456']
  // shallowReactivedataObj3.user = {
  //   name:'蒋金姘',
  //   sex:'男',
  //   age:16,
  //   aihao:{hobby:'唱跳rap'}
  // }
  //修改不是第一层
  // shallowReactivedataObj3.user.aihao = {
  //   name: '蒋金姘',
  //   sex: '男',
  //   age: 16,
  //   aihao: { hobby: '唱跳rap' },
  // };

  //修改第一层只读
  // shallowReadonlydataObj3.count++//无法为“aihao”赋值，因为它是只读属性
  //修改第二层 非 只读
  shallowReadonlydataObj3.user.aihao = {
    name: '蒋金姘',
    sex: '男',
    age: 16,
    aihao: { hobby: '唱跳rap' },
  };
  console.log(shallowReadonlydataObj3.user.aihao);
};
</script>

<style lang="scss" scoped>
.group {
  padding: 20px;
  border: 2px solid #abcdef;
  margin: 10px 0;
}
</style>
